<template>
  <el-tabs type="border-card" class="content-tabs">
    <el-tab-pane label="退订审核">
      <el-card class="content-card">
        <template #header>
          <div class="card-header">
            <span>退订审核</span>
          </div>
        </template>

        <div class="search-form">
          <span>查询时间段：</span>
          <el-select v-model="selectValue" placeholder="全部(空)">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-button type="primary" @click="fetchCancelList()">搜索</el-button>          
        </div>

        <div class="content-box">
          <el-table
            :data="cancelList"
            style="width: 100%; margin-top: 20px"
            stripe
            row-key="cancelId"
          >
            <el-table-column
              type="index"
              width="80"
            />
            <el-table-column
              prop="roomName"
              label="房间名"
              show-overflow-tooltip
            />
            <el-table-column
              prop="userAccount"
              label="退订账户"
              show-overflow-tooltip
            />            
            <el-table-column
              prop="cancelAmount"
              label="退订金额"
              show-overflow-tooltip
              width="160"
            />
            <el-table-column
              prop="cancelOrdertime"
              label="退订时间"
              show-overflow-tooltip
            />
            <el-table-column
              prop="cancelStatus"
              label="状态"
              width="80"
            />
            <el-table-column label="操作" width="180">
              <template #default="scope">
                <el-button
                  type="primary"
                  size="small"
                  v-if="scope.row.cancelStatus==='待审核'"
                  @click="handleCancel(scope.row,'已退款')"
                >
                  退订
                </el-button>
                <el-button
                  type="warning"
                  size="small"
                  v-if="scope.row.cancelStatus==='待审核'"
                  @click="handleCancel(scope.row,'已拒绝')"
                >
                  拒绝
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            :total="total"
            current-page="currentPage"
            :page-size="9"
            :pager-count="8"
            layout="total, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
            class="pagination-container"
          />
        </div>
      </el-card>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
  import { ElMessage } from 'element-plus'
  import { ref,reactive, onMounted } from 'vue'
  import { 
    GetCancelListServer,
    AudioCancelSever
  } from '@/api/instance'

  onMounted(()=>{
    fetchCancelList();
  })

  const selectValue = ref('')
  const options=[
    { id:0 , value: '' ,label: '全部(空)' },
    { id:1 , value: '提前 24 小时' , label: '提前 24 小时' },
    { id:2 , value: '提前 48 小时' , label: '提前 48 小时' },
    { id:3 , value: '提前 72 小时' , label: '提前 72 小时' },
  ]
  const cancelList=reactive([
  ])
  const currentPage = ref(1)
  const total=ref(0)
  const fetchCancelList=async (page=1) => {
    currentPage.value=page;
    try{
      const res = await GetCancelListServer({unsubscribeTime:selectValue.value});
      if(res.code===0){
        const allData=res.data||[];
        total.value=allData.length;
        const start=(page-1)*9;
        const end=start+9;
        cancelList.splice(0,cancelList.length,...allData.slice(start,end));
      }else{
        ElMessage.error(res.message || '获取退订列表失败')  
      }
    }catch(error){
      ElMessage.error(error.message || '网络请求失败1')
    }
  }
  const handleCancel =async (row,status) => {
    try{
      const res = await AudioCancelSever({
        cancelId:row.cancelId,
        cancelStatus:status
      })
      if(res.code===0){
        ElMessage.success('退订审批成功')
        fetchCancelList();
      }else{
        ElMessage.error(res.message || '退订审批失败')
      }
    }catch(error){
      ElMessage.error(error.message || '网络请求失败2')
    }
  }
  // 处理每页显示条目数变化
  const handleSizeChange = (pageSize) => {
    // 可以在这里添加逻辑来处理每页显示条目数的变化
      console.log(`每页显示条目数变为: ${pageSize}`);
  };
  // 处理已创建社团分页变化
  const handlePageChange = (newPage) => {
      fetchCancelList(newPage);
  };
</script>

<style lang="scss" scoped>
  .content-tabs{
    height: 95%;
    width: 95%;
    margin: 15px auto;//原来为20px，现在为15px
    .content-card{
      height: 95%;
      margin: 20px;
      .card-header{
        font-size: 18px;
        font-weight: bold;
      }
      .search-form{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 15px;
        :deep(.el-select){
          width: 200px;
          margin-right: 20px;
        }
      }
      .content-box{
        .pagination-container{
          display: flex;
          justify-content: center;
          margin-top: 30px
        }
      }
    }
  }
  .el-tab-pane {
    height:100%;
  }
  .el-form {
    padding: 20px;
  }
  .el-form-item {
    margin-bottom: 60px; /* 原默认值为 25px，可调大数值 */
    margin-right:45%;
    margin-left:5%;
  }
</style>